<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">
        退款查询
      </section>
      <a-row :gutter="16">
        <a-col :span="8">
          <span class="label">订单号：</span>
          <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="orderId" placeholder="请输入订单号"/>
        </a-col>
        <a-col :span="8">
          <span class="label">费用类型：</span>
         <!-- <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="travellerName" placeholder="请选择费用类型"/> -->
		 <a-select class="w-full" @change="search"    allow-clear v-model="refundType"
		 					placeholder="请选择费用类型">
		 					<a-select-option v-for="item in refundTypeEnum" :value="item.value"
		 						:key="item.value">{{
		   item.name
		 }}</a-select-option>
		 				</a-select>
        </a-col>
      <a-col :span="8">
        <span class="label">退款类型：</span>
       <!-- <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="travellerName" placeholder="请选择退款类型"/> -->
	   <a-select  class="w-full" @change="search" allow-clear v-model="payType" placeholder="请选择退款类型"
	   					:disabled="isdisabled">
	   					<a-select-option v-for="item in paymentList" :value="item.id" :key="item.id">{{
	     item.name
	   }}</a-select-option>
	   				</a-select>
      </a-col>
        <a-col v-bind="colSpan">
          <span class="label">服务商：</span>
		  <a-select
		      allow-clear
		      show-search
		      labelInValue
		      @change="search"
		      v-model="vendorId"
		      class="w-full"
		      placeholder="请选择服务商"
		      :loading="selectConfig.searchLoading"
		      @focus="focus"
		     @search="searchData"
		     :filter-option="filterOption"
		     @popupScroll="popupScroll"
		    >
		      <a-select-option v-for="item in vendorList" :value="item.id" :key="item.id">{{
		        item.name
		      }}</a-select-option>
		  
		    </a-select>
           <!-- <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="createBy" placeholder="请输入创建人"/> -->
		  <!-- <SelectUser
		   class="w-full"
		     placeholder="请选择创建人"
		     :storeId="storeId"
		     :options="{ allowClear: true }"
		     v-model.sync="createBy"
		    @change="search"
		   /> -->
        </a-col>
       <a-col v-bind="colSpan">
         <span class="label">创建时间：</span>
         <a-range-picker
           @change="search"
           v-model="createTime"
           class="w-full"
           placeholder="请选择创建时间"/>
       </a-col>
       <a-col v-bind="colSpan">
         <span class="label">实际还车：</span>
         <a-range-picker
           @change="search"
           v-model="realityReturn"
           class="w-full"
           placeholder="请输入还车时间"/>
       </a-col>
       <a-col v-bind="colSpan">
         <span class="label">渠道订单号：</span>
           <a-input :max-length="100" @keyup.enter="search" allow-clear v-model="channelOrderNo" placeholder="请输入渠道订单号"/>
       </a-col>
	   <a-col :span="8">
	     <a-button class="ml-18" type="primary" @click="search">查询</a-button>
	     <a-button class="mx-8" @click="reset">重置</a-button>
	     <a-button
	       class=" border-5"
	       type="primary"
	       ghost
	       @click="exportTable"
	     >导出
	     </a-button>
	   </a-col>
      </a-row>
    
     
      

      <a-table
        class="mt-16"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
      >
        <template #orderId="orderId, data">
        
         
          <section>
			 <div>平台：<span style="color: #1890ff;"> <router-link
			 			:to="{name: 'OrderList', params: {orderId:data.orderId,name:'退款平台'}}">{{ data.orderId }}</router-link></span>
			 </div>
			 <div>渠道：<span style="color: #1890ff;"> <router-link
			 			:to="{name: 'OrderList', params: {channelOrderNo:data.channelOrderNo,name:'退款渠道'}}">{{ data.channelOrderNo }}</router-link></span>
			 </div>
		  </section>
        </template>
		<template #refundType="refundType, data">
		
		 
		  <section>
			 {{getRefundType(data.refundType)}}
		  </section>
		</template>
        
      </a-table>
    </a-card>
  
  </a-spin>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import moment from 'moment'
import { searchVendor} from '@/api/vendor'
import { debounce} from 'lodash'
import { getOrderRefundExport, getOrderRefundSearch } from '@/api/order/refundInquiry'
export default {
  mixins: [tableMixins],
  data() {
    return {
      loading: false,
	  orderId:'',
	  channelOrderNo:undefined,
	  createBy:undefined,
	  refundType:undefined,
	  payType:undefined,
	  vendorId:undefined,
	  createTime:[undefined,undefined],
	  realityReturn:[undefined,undefined],
	  selectConfig:{
	    searchKey: '',
	    searchLoading: false,
	    data: [],
	    total:0,
	    pageNum:1,
	    rowsNum:10,
	  },
	  paymentList: [
	  	//支付类型
	  	{
	  		id: 1,
	  		name: '线上退款',
	  	},
	  	{
	  		id: 2,
	  		name: '线下退款',
	  	},
	  ],
	   refundTypeEnum:[],//费用类型
	   colSpan: {
	     xl: 12,
	     xxl: 8
	   },
    
      columns: [
        {title: '订单号', dataIndex: 'orderId', width: 200, scopedSlots: {customRender: 'orderId'}},
        {
          title: '退款类型',
          dataIndex: 'refundType',
          width: 200,
          scopedSlots: {customRender: 'refundType'}
        },
        {
          title: '退款金额(元)',
          width: 200,
          dataIndex: 'amount',
        
        },
		{
		  title: '退款原因',
		  width: 320,
		  dataIndex: 'reason',
		
		},
		{
		  title: '服务商',
		  width: 200,
		  dataIndex: 'vendorName',
		
		},
		{
		  title: '创建时间',
		  width: 200,
		  dataIndex: 'createTime',
		
		},
		{
		  title: '实际还车时间',
		  width: 200,
		  dataIndex: 'realityReturnTime',
		
		},
      
      ],
	  vendorList:[],
      data: [],
	   storeId: undefined,
	     exportPath: false,
    }
  },
  components:{
   
  },
  computed: {
    scroll() {
      return {x: this.data.length === 0 ? undefined : 1300}
    },
  },
 
  async created() {
 this.getData()
    this.refundTypeEnum = await this.$utils.getDictList('OrderRentalRefundType')
   
  },
  methods: {
    moment,
   getData() {
      this.loading = true
       getOrderRefundSearch({
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
		vendorId:this.vendorId?this.vendorId.key:undefined,
        orderId: this.orderId.trim() || undefined,
		channelOrderNo:this.channelOrderNo,
		payType:this.payType,
		refundType:this.refundType,
        createTimeStart: this.$utils.getStartTime(this.createTime[0]),
        createTimeEnd: this.$utils.getEndTime(this.createTime[1]),
        realityReturnTimeStart: this.$utils.getStartTime(this.realityReturn[0]),
        realityReturnTimeEnd: this.$utils.getEndTime(this.realityReturn[1]),
     
      }).then(data => {
        this.total = data.rowCount
      
        this.data = data.items
      }).finally(() => this.loading = false)
    },
	filterOption(input, option) {
	  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
	},
	getVendorList(){
	  this.selectConfig.searchLoading = true
	  searchVendor({
	        search: this.selectConfig.searchKey.trim(),
	        rowsNum: this.selectConfig.rowsNum,
	       pageNum: this.selectConfig.pageNum,
	        isEnabled: true
	      }).then((data) => {
	        this.selectConfig.searchLoading = false
	        const {items, rowCount} = data
	        this.$nextTick(() => {
	          this.vendorList = this.selectConfig.pageNum === 1 ? items : [...this.vendorList.concat(items)]
	          this.$forceUpdate()
	        })
	       
	       this.selectConfig.total = rowCount
	      }
	    ).catch(() => this.selectConfig.searchLoading = false)
	},
	searchData(searchKey) {
		console.log(searchKey,'xxxx')
	    this.selectConfig.searchKey = searchKey
	    this.selectConfig.pageNum = 1
	    this.getVendorList()
	  },
	focus() {
	    this.selectConfig.searchKey = ''
	    this.selectConfig.pageNum = 1
	    this.getVendorList()
	  },
	  popupScroll:debounce (function (e) {
	    const {scrollHeight, scrollTop, clientHeight} = e.target
	    if (scrollHeight - scrollTop === clientHeight) {
	      if (!(this.vendorList.length === this.selectConfig.total)){
	        this.selectConfig.pageNum++
	        this.getVendorList()
	      }
	    }
	  },500),
	getRefundType(id){
		let foundItem = this.refundTypeEnum.find(item => item.value === id);
		return foundItem.name
	},
  exportTable() {
      if (this.exportPath) return false
      this.exportPath = true
      getOrderRefundExport({
		 pageNo: this.pageNum,
		 pageSize: this.rowsNum,
		 vendorId:this.vendorId?this.vendorId.key:undefined,
		 orderId: this.orderId.trim() || undefined,
		 channelOrderNo:this.channelOrderNo,
		 payType:this.payType,
		 refundType:this.refundType,
		 createTimeStart: this.$utils.getStartTime(this.createTime[0]),
		 createTimeEnd: this.$utils.getEndTime(this.createTime[1]),
		 realityReturnTimeStart: this.$utils.getStartTime(this.realityReturn[0]),
		 realityReturnTimeEnd: this.$utils.getEndTime(this.realityReturn[1]),
	  }).then(res => {
          this.dataURLtoDownload(res.base64, res.name)
          // if (res.domain) {
          //     this.$refs.download.href = res.domain + res.filePath
          //     setTimeout(() => this.$refs.download.click())
          // } else {
          //     this.$message.warning('暂无符合条件的数据！')
          // }
      }).finally(() => {
          this.exportPath = false
      })
  },
  dataURLtoDownload(dataurl, name) {
      var bstr = atob(dataurl), //解析 base-64 编码的字符串
          n = bstr.length,
          u8arr = new Uint8Array(n) //创建初始化为0的，包含length个元素的无符号整型数组
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n) //返回字符串第一个字符的 Unicode 编码
      }
      let blob = new Blob([u8arr], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) //转化成blob
      let url = URL.createObjectURL(blob) //这个新的URL 对象表示指定的 File 对象或 Blob 对象
      let a = document.createElement('a') //创建一个a标签
      a.href = url
      a.download = name
      a.click()
      URL.revokeObjectURL(a.href) //释放之前创建的url对象
  },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
	
		
      this.orderId = ''
   
      this.channelOrderNo = undefined
    this.vendorId=undefined
      this.payType = undefined
      this.refundType =undefined
      this.createTime = [undefined, undefined]
      this.realityReturn = [undefined, undefined]
    
      this.search()
    },
 
  }
}
</script>
<style lang="less" scoped>
  @orange: #FAAD14;
  @blue: #1890FF;
  @purple: #722ED1;
  @lightCyan: #13C2C2;
  @green: #52C41A;
  @lightRed: #FA541C;
  @red: #F5222D;
  .ant-col {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .label {
      flex-shrink: 0;
      width: 86px;
      text-align: right;
      font-size: 14px;
      color: #595959;
    }

    .w-full {
      flex: 1;
    }
  }
  .order-table {
    /deep/ .ant-table {
      .ant-table-tbody > tr > td {
        padding: 16px 8px;
        color: #333;
      }
    }
  }
  .text-333 {
    color: #333
  }
  .tag {
    margin-right: 7px;
    padding: 4px;
    line-height: 1;
    border-radius: 3px;
    font-size: 12px;
    color: #ffffff;
    font-weight: normal;
    &.orange-bg {
      background-color: #ff6600;
    }
    &.grey-bg {
      background-color: #929292
    }
  }
  .vehicle-num {
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    border-radius: 3px;
  }
  .orange-color {
    color: #ff6600
  }
  .text-666 {
    color: #666;
  }
  .text-gray {
    color: #999
  }
  .order-status {
    &-0 {
      color: @red
    }

    &-2 {
      color: @blue
    }

    &-3 {
      color: @orange
    }

    &-4 {
      color: @lightCyan
    }

    &-5 {
      color: @green
    }
  }

  .title {
    display: flex;
    align-items: center;

    .dot {
      width: 4px;
      height: 4px;
      margin: 0 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.65);
    }
  }

  .text-orange {
    color: @orange
  }

  .bg-orange {
    background: @orange;
  }

  .text-blue {
    color: @blue
  }

  .bg-blue {
    background: @blue
  }

  .text-purple {
    color: @purple
  }

  .bg-purple {
    background: @purple
  }

  .text-lightRed {
    color: @lightRed
  }

  .bg-lightRed {
    background: @lightRed
  }

  .text-red {
    color: @red
  }

  .bg-red {
    background: @red
  }

  .vendor-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 0;
    border: 1px solid #e1e1e1
  }

  /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }

  /deep/ .ant-table-body {
    overflow: auto !important;
  }

  /*/deep/ .ant-tabs {*/
  /*  .ant-tabs-content {*/
  /*    padding: 10px 24px 0;*/
  /*    min-height: calc(100vh - 480px);*/
  /*    max-height: calc(100vh - 420px);*/
  /*    overflow: auto*/
  /*  }*/

  /*  .ant-tabs-tab {*/
  /*    margin-right: 20px;*/
  /*  }*/

  /*  .ant-tabs-nav-container {*/
  /*    font-size: 16px;*/
  /*  }*/
  /*}*/
</style>
